<template>
    <div id="wrapper">
        <swiper :options="swiperOption">
    <swiper-slide v-for="(item, index) in swiperLists" :key="index" >
      <img  class="swiper-img"  :src="item.imgs" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
    </div>
</template>
<script>
export default {
    data () {
        return {
            swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 1000,
        paginationClickable: true,
        autoplayDisableOnInteraction: false
      },
            swiperLists: [
        {
          id: '10001',
          imgs: 'http://img1.qunarzz.com/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg'
        },
        {
          id: '10002',
          imgs: 'http://img1.qunarzz.com/piao/fusion/1807/d0/872980a7031b5402.jpg_750x200_bb4a213a.jpg'
        },
        {
          id: '10003',
          imgs: 'http://img1.qunarzz.com/piao/fusion/1806/3c/c72a1ccd4d7b2202.jpg_750x200_b88bbab4.jpg'
        },
        {
          id: '10004',
          imgs: 'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
        }
      ]
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
  #wrapper >>> .swiper-pagination-bullet-active
    background-color $bgColor
  #wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 26.67%
    background-color #eee
    .swiper-img
      width 100%
</style>


